<%@ page language="java" import="cn.waqwb.connDB,java.util.*" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%
    ArrayList<String[]> list = connDB.index_3();
%>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ECharts supermarket</title>
    <link href="./css/style.css" type='text/css' rel="stylesheet"/>
    <link rel="shortcut icon" href="#"/>
    <script src="./js/echarts.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/style/macarons.js"></script>
    <script src="./js/style/roma.js"></script>
    <script src="./js/style/vintage.js"></script>
</head>
<body>
<div class='header'>
    <p>ECharts supermarket</p>
</div>
<div class="content">
    <div class="nav">
        <ul>
            <li><a href="./index.jsp">总商品品类成交量对比</a></li>
            <li><a href="./SMindex1.jsp">饮品成交量对比</a></li>
            <li><a href="./SMindex2.jsp">各省会员人数</a></li>
            <li class="current"><a href="#">男女购买商品对比</a></li>
            <li><a href="./SMindex4.jsp">商品购买关系</a></li>

        </ul>
    </div>
    <div class="container">
        <div class="title">男女购买商品对比</div>
        <div class="show">
            <div class='chart-type'>柱状图</div>
            <div id="main"></div>
        </div>
    </div>
</div>
<script>
    // 基于准备好的 DOM，初始化 ECharts 实例
    // document.getElementById('main') 用于获取页面中 id 为 "main" 的 DOM 元素，该元素将作为 ECharts 图表的容器
    // 'light' 是 ECharts 的主题名称，这里使用浅色主题
    var myChart = echarts.init(document.getElementById('main'), 'light');

    // 定义一个空数组 data，用于存储图表的数据
    const data = [];
    // 在 data 数组中创建两个空数组，分别用于存储女性和男性的数据
    data[0] = [];
    data[1] = [];

    // 这是一段 JSP 代码，用于遍历服务器端传递过来的 list 数据
    <%
    for (String[] a : list) {
        // 如果数据项的第一个元素（性别）为 "FEMALE"（女性）
        if (a[0].equals("FEMALE")) {
    %>
    // 将该数据项的第三个元素（购买商品相关数据）添加到 data[0] 数组中（用于存储女性数据）
    data[0].push("<%=a[2]%>");
    <%
        }
        // 如果数据项的第一个元素（性别）为 "MALE"（男性）
        else if (a[0].equals("MALE")) {
    %>
    // 将该数据项的第三个元素（购买商品相关数据）添加到 data[1] 数组中（用于存储男性数据）
    data[1].push("<%=a[2]%>");
    <%
        }
    }
    %>

    // 定义 ECharts 图表的配置选项
    var option = {
        // 图表标题配置
        title: {
            // 标题文本内容，表明图表展示的是男女购买商品对比
            text: '男女购买商品对比',
        },
        // 原本这里可以设置颜色数组，当前被注释掉了，如 color: ['#C6E579','#27727B']，可按需启用
        //color: ['#C6E579','#27727B'],
        // 提示框配置
        tooltip: {
            // 提示框的触发类型为 'axis'，即鼠标悬停在坐标轴上时触发
            trigger: 'axis',
            // 坐标轴指示器配置，用于指示鼠标悬停位置对应的坐标轴信息
            axisPointer: {
                // 坐标轴指示器的类型为阴影
                type: 'shadow'
            }
        },
        // 直角坐标系内绘图网格配置
        grid: {
            // 网格左侧距离容器左侧的距离为容器宽度的 3%
            left: '5%',
            // 网格右侧距离容器右侧的距离为容器宽度的 4%
            right: '10%',
            // 网格底部距离容器底部的距离为容器高度的 3%
            bottom: '3%',
            // 是否包含坐标轴的标签，设置为 true 表示包含
            containLabel: true
        },
        // 图例配置
        legend: {
            // 图例的垂直位置，设置为 -2，可调整图例的位置
            top: -2,
            // 图例的数据项，这里表示女性和男性
            data: ['female','male']
        },
        // x 轴配置
        xAxis: {
            // 坐标轴类型为类目轴
            type: 'category',
            // x 轴的数据，这里是不同商品类别
            data: ['母婴', '化妆品', '洗涤', '饮料', '食品', '蔬果', '家居', '肉类', '奶制品', '纸类', '宠物'],
            axisLabel: {
                interval: 0, // 强制显示所有标签
                rotate: 45, // 文字旋转45度，可根据实际情况调整角度
                fontSize: 12 // 减小字体大小，可按需调整
            }
        },
        // y 轴配置
        yAxis: {
            // 坐标轴类型为数值轴
            type: 'value',
            // 坐标轴两端留白策略，设置为 [0, 0.01] 表示两端不留白
            boundaryGap: [0, 0.01]
        },
        // 图表系列配置，一个图表可以包含多个系列，这里有两个柱状图系列
        series: [
            {
                // 系列名称，用于标识该系列为女性数据
                name: 'female',
                // 图表类型为柱状图
                type: 'bar',
                // 该系列的数据，使用之前存储女性数据的 data[0] 数组
                data: data[0]
            },
            {
                // 系列名称，用于标识该系列为男性数据
                name:'male',
                // 图表类型为柱状图
                type: 'bar',
                // 原本这里有示例数据，当前被注释掉了，实际使用 data[1] 数组中的数据
                // data:[2894,9305,10447,33545,107114,41570,5429,8737,39404,9807,15],
                // 该系列的数据，使用之前存储男性数据的 data[1] 数组
                data: data[1]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表
    // 如果 option 存在（不为 null），则调用 myChart 的 setOption 方法将配置应用到图表上进行显示
    option && myChart.setOption(option);
</script>
</body>
</html>